<template>
	<view class="tea-pay-app" >
		<view class="pay" >
			<view class="money">
				<view class="title">充值门店</view>
				<view class="recharge">
					<view>
						<picker @change="selectChange" :range="teaHouseNameList">
							<label class="select-teahouse">{{ selectDefaultText }}</label>
							
						</picker>
					</view>
				</view>

				<view class="title"  v-if="teaHouseId">充值规格</view>
				<view class="recharge" v-if="teaHouseId">
					<view
						class="recharge-item"
						:class="{ selected: item.rechargeGiveId == rechargeGiveId }"
						v-for="(item, itemKey) in rechargeGiveList"
						@click="itemClick(item)"
						:key="itemKey"
					>
						<view>
							<view class="recharge-item-sub1">{{ (item.minMoney + item.giveMoney) / 100 }}元</view>
							<view class="recharge-item-sub2">售价{{ item.minMoney / 100 }}元</view>
						</view>
					</view>
				</view>
				<view class="money" >
					<view class="title">其他金额</view>
					<input
						type="number"
						v-model="money"
						placeholder="请输入"
						placeholder-style="color:#999"
						style=" padding: 20upx; border: 1upx solid #eee; background-color: white"
					/>
				</view>
			</view>
			<view v-if="other" class="pay" style="background: #ffffff; padding: 20upx"></view>
			<view class="submit-button" @click="toPay">去支付</view>
			
			<view  style="font-size: 28rpx;">
				<view style="font-weight: bold; padding: 10upx 0 10upx 0;">备注：</view>
				充值金额可用于包间及产品消费。
			</view>
		</view>

		
	</view>
</template>

<script>
import util from '@/libs/util.js';
import globalConfig from '../../../config';
const baseHttp = globalConfig.API_HOST;

export default {
	data() {
		return {
			selectIndex: 0,
			selectDefaultText: '请选择充值门店',
			baseHttp: baseHttp,
			teaHouseId: 0,
			teaHouseNameList: [],
			teaHouseList: [],
			rechargeGiveList: [],
			other: false,
			wxCode: '',
			money: '',
			rechargeGiveId: 0,
			teaConfig: {
				deposit: '',
				vipMoney: '',
				superVipTimes: '',
				subMemberLimit: '',
				remark: ''
			}
		};
	},
	onLoad(params) {
		this.teaHouseId = params.teaHouseId;
		// TODO 测试数据，上线前要去掉
		// this.teaHouseId = 18
		this.roomId = params.roomId;
		console.log('teaHouseId:' + this.teaHouseId);
		//console.log("roomId:"+this.roomId);
		if (!this.teaHouseId) {
			this.getHouseList();
		}
	},
	onShow() {
		this.getRechargeGive();
		//this.getDataList();
		//this.getConfigInfo();
		//this.getWxCode();
	},
	components: {},
	computed: {},
	methods: {
		...util,
		getWxCode() {
			wx.login({
				success: (res) => {
					if (res.code) {
						this.wxCode = res.code;
						console.log(this.wxCode);
					}
				}
			});
		},
		selectChange(e) {
			this.selectIndex = e.target.value;
			this.teaHouseId = this.teaHouseList[this.selectIndex].teaHouseId;
			this.selectDefaultText = this.teaHouseList[this.selectIndex].name;
			this.getRechargeGive();
		},
		getHouseList() {
			this.$api
				.post('/teaHouse/queryPage', {
					pageNO: 1,
					limit: 100
				})
				.then((response) => {
					if (response.ret === 1) {
						let page = this;
						page.teaHouseNameList = [];
						page.teaHouseList = response.data;
						console.log(page.teaHouseList);
						response.data.forEach(function (item) {
							page.teaHouseNameList.push(item.name);
						});
					}
				});
		},
		getRechargeGive() {
			this.$api
				.post('/weixin/rechargeGive/getByTeaHouseId', {
					teaHouseId: this.teaHouseId
				})
				.then((response) => {
					console.log('getByTeaHouseId');
					if (response.ret === 1) {
						this.rechargeGiveList = response.data;
					}
				});
		},
		itemClick(item) {
			this.rechargeGiveId = item.rechargeGiveId;
			this.money = item.minMoney / 100;
		},
		toPay() {
			if (!this.teaHouseId) {
				this.$Message.error('请选择充值门店');
				return false;
			}
			wx.login({
				success: (res) => {
					if (res.code) {
						this.wxCode = res.code;

						this.$api
							.post('/weixin/recharge', {
								code: this.wxCode,
								teaHouseId: this.teaHouseId,
								money: this.money * 100
							})
							.then((response) => {
								if (response.ret === 1) {
									//console.log(response);
									let json = '{' + response.data + '}';
									json = json.replace(/'/g, '"');
									json = JSON.parse(json);

									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: json.timeStamp,
										nonceStr: json.nonceStr,
										package: json.package,
										signType: json.signType,
										paySign: json.paySign,
										success: (res) => {
											this.$Message.success('支付成功');

											uni.navigateBack({
												delta: 1
											});
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								} else {
									this.$Message.error(response.msg);
								}
							});
					}
				}
			});
		},
		goPage(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style lang="scss">
page {
}







.tea-pay-app {
	background-color: $uni-theme-color;
	height: 100vh;
	padding: 20rpx;
	color: #707070;
	box-sizing: border-box;
	.pay{
		 padding: 30upx;
		 background-color: #fff;
		 border-radius: 20rpx;
		.money {
			font-size: 30upx;
			.title{
				// font-weight: bold;
				 margin-bottom:30upx;
			}
			.recharge {
				margin-bottom:30upx;
				.select-teahouse {
					text-align: center;
					padding: 10upx 30upx;
					border: 1px solid #eee;
					background-color: white;
					border-radius: 8upx;
					font-size: 28rpx;
				}
				.recharge-item {
					display: inline-flex;
					border: 1px solid #707070;
					text-align: center;
					border-radius: 10upx;
					padding: 20rpx;
					.recharge-item-sub1 {
						font-weight: bold;
					}
					.recharge-item-sub2 {
						font-size: 24upx;
						margin-top: 10upx;
					}
				}
			
				.selected {
					border: 1px solid $uni-theme-color;
					color: $uni-theme-color;
				}
			}
		}
	}
	

	.submit-button {
		font-size: 32upx;
		margin: 30rpx auto;
		color: white;
		text-align: center;
		border-radius: 56upx;
		width: 630rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		opacity: 1;
		background: $uni-theme-color;
	}
}
</style>
